<!DOCTYPE HTML>
<html class="butler">
<head>
    <title>科寓共享家</title>
    <% include common/meta.ejs %>
    <% include common/public.ejs %>
    <style>
        #saveButton{
            z-index: 1000;
        }
    </style>
</head>
<body>
<div class="weui-pull-to-refresh-layer">
    <div class="pull-to-refresh-arrow"></div> <!-- 上下拉动的时候显示的箭头 -->
    <div class="pull-to-refresh-preloader"></div> <!-- 正在刷新的菊花 -->
    <div class="down">下拉刷新</div><!-- 下拉过程显示的文案 -->
    <div class="up">释放刷新</div><!-- 下拉超过50px显示的文案 -->
    <div class="refresh">正在刷新...</div><!-- 正在刷新时显示的文案 -->
</div>


<div class="weui-row weui-no-gutter">
    <div class="weui-col-50">
        <a href="butlerBill?status=0"
           class="topNav <%= data.properties.status == '0' ? 'active' : '' %>">
            未支付
        </a>
    </div>
    <div class="weui-col-50">
        <a href="butlerBill?status=1"
           class="topNav <%= data.properties.status == '1' ? 'active' : '' %>">
            已支付
        </a>
    </div>
</div>
<div id="doing"></div>
<div class="weui-infinite-scroll">
    <div class="infinite-preloader"></div><!-- 菊花 -->
    正在加载... <!-- 文案，可以自行修改 -->
</div>

<div id="editPopup" class="weui-popup-container  popup-bottom">
    <div class="weui-popup-overlay"></div>
    <div class="weui-popup-modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <a href="javascript:void(0);" class="picker-button" id="saveButton">保存</a>
                <h1 class="title">账单</h1>
            </div>
        </div>
        <div class="modal-content">
            <form id="editForm">
                <div class="weui_cells weui_cells_form">
                    <div class="weui_cell">
                        <div class="weui_cell_hd"><label class="weui_label">实际支付</label></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input class="weui_input" type="number" placeholder="实际支付" name="payedAmount"/>
                        </div>
                    </div>
                </div>
                <div class="weui_cells weui_cells_form">
                    <div class="weui_cell">
                        <div class="weui_cell_hd"><label class="weui_label">支付方式</label></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input class="weui_input" type="text" placeholder="支付方式" name="payMethod" id="method"/>
                        </div>
                    </div>
                </div>
                <div class="weui_cells weui_cells_form">
                    <div class="weui_cell">
                        <div class="weui_cell_hd"><label class="weui_label">支付人</label></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input class="weui_input" type="text" placeholder="支付人" name="payedPerson"/>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<% include common/footer.ejs %>
<script>
    let loadFlag = false;
    let editId = '';
    let pageNumber = 0;

    let sendData = {

        id: '',
        result: ''
    }

    let statusData = {
        properties: {}
    };
    statusData.properties.status = `<%= data.properties.status %>`;

    function reloadingData() {
        $('.weui-infinite-scroll').css('display', 'block');
        statusData.properties.pageSize = 10;
        statusData.properties.pageNumber = pageNumber;
        console.log(statusData);
        if (!loadFlag) {
            loadFlag = true;
            Dolphin.ajax({
                url: CTX + '/api/4bd717c1cca5449a8a82c1b1584f87d3',
                type: 'post',
                data: Dolphin.json2string(statusData),
                forceUrl: 'true',
                onSuccess: function (data) {
                    loadFlag = false;
                    pageNumber++;
                    statusData.properties.pageNumber = pageNumber;
                    console.log(pageNumber);
                    let list = data.rows;
                    let contractId, con = '', con2 = '';
                    if (list.length == 0) {
                        $('.weui-infinite-scroll').css('display', 'none');
                        con = ` <br>
                    <div style="text-align: center">
                         <i class="weui_icon_success_circle"></i>到底啦~</div>`
                        $('#doing').append(con);
                        $(document.body).destroyInfinite()
                        return;
                    }

                    for (let i = 0; i < list.length; i++) {
                        if (list[i].status == 0) {
                            var payType;
                            switch (list[i].type){
                                case 2:
                                    payType='水电账单';
                                    break;
                                case 1:
                                    payType='合同账单';
                                    break;
                                case 3:
                                    payType='报修账单';
                                    break;
                                case 4:
                                    payType='保洁账单';
                                    break;
                                case 5:
                                    payType='其他账单';
                                    break;
                            }
                            con = con + `<div class="block">
                            <h3>
                                <span class="stateIcon"></span>
                                未支付
                            </h3>
                            <p>
                                <span class="label">支付类型</span>
                                <span>${payType}</span>
                            </p>
                            <p>
                                <span class="label">生成时间</span>
                                <span>${list[i].createdDate }</span>
                            </p>
                            <p>
                                <span class="label">金额</span>
                                <span>${list[i].totalAmount}</span>
                            </p>
                            <p>
                                <span class="label">房间</span>
                                <span>${list[i].properties.house.name}(${list[i].properties.house.houseNumber})</span>
                            </p>
                            <p>
                                <span class="label">负责人</span>
                                <span>${list[i].properties.phone}</span>
                            </p>
                            <hr />
                            <button class="editIcon" data-id="${list[i].id}"></button>
                            <p>
                              &nbsp
                            </p>
                        </div>`
                        } else if (list[i].status == 1) {
                            var payType;
                            switch (list[i].type){
                                case 2:
                                    payType='水电账单';
                                    break;
                                case 1:
                                    payType='合同账单';
                                    break;
                                case 3:
                                    payType='报修账单';
                                    break;
                                case 4:
                                    payType='保洁账单';
                                    break;
                                case 5:
                                    payType='其他账单';
                                    break;
                            }
                            con2 = con2 + `<div class="block">
                            <h3>
                                <span class="stateIcon"></span>
                                已支付
                            </h3>
                            <p>
                                <span class="label">支付类型</span>
                                <span>${payType}</span>
                            </p>
                            <p>
                                <span class="label">支付人</span>
                                <span>${list[i].payedPerson }</span>
                            </p>
                            <p>
                                <span class="label">生成时间</span>
                                <span>${list[i].createdDate }</span>
                            </p>
                            <p>
                                <span class="label">支付时间</span>
                                <span>${list[i].payedDate }</span>
                            </p>
                            <p>
                                <span class="label">账户金额</span>
                                <span>${list[i].actualAmount }</span>
                            </p>
                            <p>
                                <span class="label">实际支付</span>
                                <span>${list[i].payedAmount }</span>
                            </p>
                        </div>`
                        }
                    }
                    if (statusData.properties.status == '0') {
                        $('#doing').append(con);
                    } else {
                        $('#doing').append(con2)
                    }
                    ;
                    $('.editIcon').click(function () {
                        editId = $(this).data('id');
                        Dolphin.form.empty($('#editForm'));
                        $('#editPopup').popup();
                    });

                    $('#saveButton').click(function () {
                        let data = Dolphin.form.getValue('editForm');
                        $.closePopup();
                        sendData.id = editId;
                        sendData.result = data.remark;
                        Dolphin.ajax({
                            url: CTX + '/api/0aac1b853c024d4c9dddae858934a38d',
                            type: 'post',
                            data: Dolphin.json2string(sendData),
                            forceUrl: 'true',
                            onSuccess: function (data) {
                                $.toast("保存成功", function () {
                                    location.reload();
                                });
                            }
                        });

                    });
                }
            })
        }

    };

    function loadingData() {
        console.log(loadFlag);
        statusData.properties.pageSize = 10;
        statusData.properties.pageNumber = 0;
        console.log(statusData);
        if (!loadFlag) {
            loadFlag = true;
            Dolphin.ajax({
                url: CTX + '/api/4bd717c1cca5449a8a82c1b1584f87d3',
                type: 'post',
                data: Dolphin.json2string(statusData),
                forceUrl: 'true',
                onSuccess: function (data) {

                    pageNumber++;
                    loadFlag = false;
                    let list = data.rows;
                    let contractId, con = '', con2 = '';

                    for (let i = 0; i < list.length; i++) {
                        if (list[i].status == 0) {
                            var payType;
                            switch (list[i].type){
                                case 2:
                                    payType='水电账单';
                                    break;
                                case 1:
                                    payType='合同账单';
                                    break;
                                case 3:
                                    payType='报修账单';
                                    break;
                                case 4:
                                    payType='保洁账单';
                                    break;
                                case 5:
                                    payType='其他账单';
                                    break;
                            }
                            con = con + `<div class="block">
                            <h3>
                                <span class="stateIcon"></span>
                                未支付
                            </h3>
                            <p>
                                <span class="label">支付类型</span>
                                <span>${payType}</span>
                            </p>
                            <p>
                                <span class="label">生成时间</span>
                                <span>${list[i].createdDate }</span>
                            </p>
                            <p>
                                <span class="label">金额</span>
                                <span>${list[i].totalAmount}</span>
                            </p>
                            <p>
                                <span class="label">房间</span>
                                <span>${list[i].properties.house.name}(${list[i].properties.house.houseNumber})</span>
                            </p>
                            <p>
                                <span class="label">负责人</span>
                                <span>${list[i].properties.phone}</span>
                            </p>
                            <hr />
                            <button class="editIcon" data-id="${list[i].id}"></button>
                            <p>
                              &nbsp
                            </p>
                        </div>`
                        } else if (list[i].status == 1) {
                            var payType;
                            switch (list[i].type){
                                case 2:
                                    payType='水电账单';
                                    break;
                                case 1:
                                    payType='合同账单';
                                    break;
                                case 3:
                                    payType='报修账单';
                                    break;
                                case 4:
                                    payType='保洁账单';
                                    break;
                                case 5:
                                    payType='其他账单';
                                    break;
                            }
                            con2 = con2 + `<div class="block">
                            <h3>
                                <span class="stateIcon"></span>
                                已支付
                            </h3>
                            <p>
                                <span class="label">支付类型</span>
                                <span>${payType}</span>
                            </p>
                            <p>
                                <span class="label">支付人</span>
                                <span>${list[i].payedPerson }</span>
                            </p>
                            <p>
                                <span class="label">生成时间</span>
                                <span>${list[i].createdDate }</span>
                            </p>
                            <p>
                                <span class="label">支付时间</span>
                                <span>${list[i].payedDate }</span>
                            </p>
                            <p>
                                <span class="label">账户金额</span>
                                <span>${list[i].actualAmount }</span>
                            </p>
                            <p>
                                <span class="label">实际支付</span>
                                <span>${list[i].payedAmount }</span>
                            </p>
                        </div>`
                        }
                    }
                    ;
                    if (statusData.properties.status == '0') {
                        $('#doing').html(con);
                        $(document.body).pullToRefreshDone();
                    } else {
                        $('#doing').html(con2);
                        $(document.body).pullToRefreshDone();
                    }
                    ;
                    $('.editIcon').click(function () {
                        editId = $(this).data('id');
                        Dolphin.form.empty($('#editForm'));
                        $('#editPopup').popup();
                    });
                    //保存支付信息
                    $("#saveButton").click(function () {
                        let data = Dolphin.form.getValue('editForm');
                        $.closePopup();
                        sendData.id = editId;
                        sendData.payedAmount = data.payedAmount;
                        sendData.payedPerson = data.payedPerson;
                        sendData.payMethod = data.payMethod;
                        Dolphin.ajax({
                            url: CTX + '/api/6cf23d5ef2134ed7be73dd2f1aec7365',
                            type: 'post',
                            data: Dolphin.json2string(sendData),
                            forceUrl: 'true',
                            onSuccess: function (reData) {
                                $.toast("保存成功", function () {
                                    location.reload();
                                });
                            }
                        });
                    });
                }
            })
        }

    };

    $(document).ready(
        function () {
            loadingData();
        }
    );
    $(document.body).pullToRefresh();

    $(document.body).on("pull-to-refresh", function () {
        //do something
        loadingData();
        $(document.body).infinite(50);
    });

    $('.weui-infinite-scroll').css('display', 'none');

    $(document.body).infinite(20);

    var loading = false;  //状态标记
    $(document.body).infinite().on("infinite", function () {
        $('.weui-infinite-scroll').css('display', 'block');
        if (loading) return;
        loading = true;
        setTimeout(function () {
            if (!loadFlag) {
                reloadingData();
            }
            loading = false;

        }, 1500);   //模拟延迟
    });

    $("#method").select({
        title: "支付类型",
        items: [
            {
                title: "微信支付",
                value: "wepay",
            },
            {
                title: "支付宝",
                value: "alipay",
            },
            {
                title: "POS刷卡",
                value: "pos",
            },
            {
                title: "现金",
                value: "cash",
            }
        ]
    });

</script>

</body>
</html>